import { Button, Form, Row, Select, Space, Table, Image, message, Popconfirm, Pagination } from 'antd';
import { useEffect, useState, type CSSProperties } from 'react';
import type { ColumnsType } from 'antd/es/table';
import type { ScopeServicesList } from '../type/stores';
import { adtypeTypeList, advertisementDelete, advertisementList } from '../apis/advertisement';
import type { AdvertisementAddParams, AdvertisementList } from '../type/advertisement';
import AdvertisementAdd from '../component/advertisement/advertisementAdd';
import Title from '../component/title';

const rootImg = import.meta.env.VITE_API_BASE_IGM
const formItem: CSSProperties = {
    marginRight: '20px'
}


function Advertisement() {
    let [counts, setCounts] = useState(0)
    let [adtype, setAdtype] = useState<ScopeServicesList[]>([])
    const [advertisementListData, setAdvertisementListData] = useState<AdvertisementList[]>([])
    let [searchParam, setSearchParam] = useState<any>({
        page: 1,
        pageSize: 10
    })
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [advertisementAddParams, setAdvertisementAddParams] = useState<AdvertisementAddParams>(
        {
            id: 0,
            title: '',
            picture: '',
            sort: 0,
            typeid: 1,
            url: '',
            enabled: 1
        })


    useEffect(() => {
        adtypeTypeListtApi()
        advertisementListApi()
    }, [])

    useEffect(() => {
        advertisementListApi()
    }, [searchParam])

    const onFinish = (values: any) => {
        setSearchParam({ ...values })
    };
    // 服务范围列表
    let adtypeTypeListtApi = async () => {
        let res = await adtypeTypeList()
        setAdtype(res.data.list)
    }
    // 公告列表
    let advertisementListApi = async () => {
        let res = await advertisementList(searchParam)
        setAdvertisementListData(res.data.list)
        setCounts(res.data.counts)
    }
    // 单个删除公告
    let advertisementDeleteApi = async (id: number) => {
        let res = await advertisementDelete(id)
        advertisementListApi()
        if (res.errCode == 10000) {
            message.success('删除成功');
        }

    }

    const handleCancel = () => {
        setIsModalOpen(false);
        setAdvertisementAddParams({
            id: 0,
            title: '',
            picture: '',
            sort: 0,
            typeid: 1,
            url: '',
            enabled: 1
        })
    };

    const rowSelection = {
        // onChange: (selectedRowKeys: React.Key[]) => {
        // },
    };
    // 添加修改
    let toAdvertisementAdd = (record?: AdvertisementList) => {
        if (record) {
            setAdvertisementAddParams({ ...record })
        }
        setIsModalOpen(true)
    }
    const columns: ColumnsType<AdvertisementList> = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '标题',
            dataIndex: 'title',
            render: (text) => (
                <div style={{ color: '#2981ff' }}>{text}</div>
            ),
        },
        {
            title: '位置',
            dataIndex: 'typeName',
        },
        {
            title: '图片',
            dataIndex: 'picture',
            render: (url) => (
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Image
                        width={'50px'}
                        height={'50px'}
                        fallback=""
                        src={rootImg + url}
                    />
                </div>
            ),
        },
        {
            title: '排序',
            dataIndex: 'sort',

        },
        {
            title: '状态',
            dataIndex: 'enabled',
            render: (text) => (
                <div>
                    {text == 0 ? '不显示' : '显示'}
                </div>
            ),
        },
        {
            title: '操作',
            dataIndex: '',
            render: (text, record) => (
                <Space size="middle">
                    <Button type="primary" style={{ backgroundColor: '#67c23a' }} onClick={() => toAdvertisementAdd(record)}>
                        修改
                    </Button>
                    <Popconfirm
                        title="是否要删除这条数据"
                        onConfirm={() => advertisementDeleteApi(record.id)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button type="primary" danger >
                            删除
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },

    ];


    return (

        <div className='news' style={{ width: '100%', paddingBottom: '50px' }}>
            <Title title='图片列表'/>
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Row>
                    <Form.Item label="公告类型" name='services' style={formItem}>
                        <Select style={{ width: 120 }} placeholder="请选择">
                            {
                                adtype.map((item) => {
                                    return <Select.Option value={item.name}>{item.name}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item style={formItem}>
                        <Button type="primary" htmlType="submit" >
                            查询
                        </Button>
                    </Form.Item>
                </Row>
            </Form>

            <Row>
                <Button type="primary" onClick={() => toAdvertisementAdd()}>
                    添加
                </Button>

            </Row>

            <Table
                rowKey='id'
                rowSelection={{
                    type: 'checkbox',
                    ...rowSelection,
                }}
                columns={columns}
                pagination={false}
                dataSource={advertisementListData}
                style={{marginTop: 20}}
            />
            <Pagination
                total={counts}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `共 ${total} 条`}
                style={{ width: '100%', marginTop: '20px', paddingBottom: '20px', justifyContent: 'center' }}
            />


            {isModalOpen && <AdvertisementAdd handleCancel={handleCancel} advertisementAddParams={advertisementAddParams} />}



        </div>
    )
}
export default Advertisement